<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>修改密码</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/aui.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/public.css" rel="stylesheet" type="text/css">
    <style>
        /*html,
        body {
            height: 100%;
            background: rgba(0, 0, 0, 0)
        }*/

        .password_tips {
            padding-top: 0.75rem;
            font-size: 0.6rem;
            color: rgba(151, 152, 153, 1);
            line-height: 0.9rem;
        }

        .bottom_btn_div .bottom_btn.mobile_phone_btn {
            margin-top: 4.5rem;
        }

        .public_list .public_item .public_item_right_img {
            width: 1.2rem;
            height: 1.2rem;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="space"></div>
        <div class="public_list" id="login">
            <div class="public_item">
                <input spellcheck="false" class="public_item_input" :type="isShowPass?'text':'password'" v-model="password" minlength="6" maxlength="16" data-type="_password" data-verify="true" data-null="true" data-regular="true" name="密码" placeholder="请输入登录密码">
                <img class="public_item_right_img" :src="(!isShowPass)?'../../image/mine/password_invisible.png':'../../image/mine/password_visible.png'" alt="" tapmode @click="fnIsShowPass()">
            </div>
            <div class="public_item">
                <input spellcheck="false" class="public_item_input" :type="isShowPassNew?'text':'password'" v-model="passwordNew" minlength="6" maxlength="16" data-type="_password" data-verify="true" data-null="true" data-regular="true" name="新密码" placeholder="请输入新登录密码">
                <img class="public_item_right_img" :src="(!isShowPassNew)?'../../image/mine/password_invisible.png':'../../image/mine/password_visible.png'" alt="" tapmode @click="fnIsShowPassNew()">
            </div>
            <p class="password_tips">* 密码由6-16位数字或字母组合</p>
        </div>
        <div class="bottom_btn_div">
            <div :class="isAvailable?'bottom_btn mobile_phone_btn':'bottom_btn mobile_phone_btn font_opacity'" tapmode @click="isAvailable?fnLogin():''">完成</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script type="text/javascript">
    var $S, USER;
    var vm;
    apiready = function() {
        $S = SERVICE();
        USER = USER();
        fnInit();

    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                password: "",
                passwordNew: "",
                isAvailable: false, //登录按钮是否可用
                isShowPass: false,
                isShowPassNew: false
            },
            methods: {
                fnIsShowPass: function() {
                    this.isShowPass = !this.isShowPass
                },
                fnIsShowPassNew: function() {
                    this.isShowPassNew = !this.isShowPassNew
                }
            },
            watch: { //监听手机号和密码的值，来判断开启和关闭登录按钮的点击状态
                password: function() {
                    fnLoginBtnStatus(this);
                },
                passwordNew: function() {
                    fnLoginBtnStatus(this);
                }
            }
        })
    }
    //修改登录按钮的启用状态
    function fnLoginBtnStatus(el) {
        if (!isEmpty(vm.passwordNew) && !isEmpty(vm.password)) {
            vm.isAvailable = true;
        } else {
            vm.isAvailable = false;
        }
    }

    function fnLogin() {
        if (fnVerify("login")) {
            $S.ShowProgress();
            var postData = {
                "password": vm.password,
                "newPassword": vm.passwordNew,
                "realPassword": vm.passwordNew
            };
            $S.POST("apiTbAppUser/updatePassword", postData, function(ret, err) {
                if (ret && ret.status == '200') {
                    fnToast("密码修改成功");
                    fnDelayCloseWin(800)
                }
                $S.CloseProgress();
            })
        }
    }
</script>

</html>
